<template>
	<div class="content">
		<heads :current='4'></heads>
		<div class="main_contact" :style="{ backgroundImage: contact }">
			<div class="m">
				<div class="grow">
					<p>{{ $t('contact.intro') }}</p>
					<span>{{ $t('contact.description') }}</span>
					<span>{{ $t('contact.faqNote') }}</span>
					<em>{{ $t('contact.termsNote') }}</em>
				</div>
				<div class="form">
					<p class="title">{{ $t('contact.getInTouch') }}</p>
          <el-form :model="ruleForm" :rules="rules" ref="formRef">
            <el-form-item prop="subject">
              <div class="label">
                <p>{{ $t('contact.subject') }}</p>
                <div class="change">
                  <el-select style="width: 100%" v-model="ruleForm.subject" type="text" :placeholder="$t('contact.subjectPlaceholder')">
                    <el-option :label="$t('products.sunsetCruise.title')" :value="$t('products.sunsetCruise.title')"></el-option>
                    <el-option :label="$t('products.privateCharter.title')" :value="$t('products.privateCharter.title')"></el-option>
                    <el-option :label="$t('products.halfDayTrip.title')" :value="$t('products.halfDayTrip.title')"></el-option>
                    <el-option :label="$t('contact.other')" :value="$t('contact.other')"></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="nickname">
              <div class="label">
                <p>{{ $t('contact.name') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.nickname" type="text" :placeholder="$t('contact.namePlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="email">
              <div class="label">
                <p>{{ $t('contact.email') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.email"  :placeholder="$t('contact.emailPlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="phone">
              <div class="label">
                <p>{{ $t('contact.phone') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.phone"  type="text" :placeholder="$t('contact.phonePlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="content">
              <div class="label">
                <p>{{ $t('contact.message') }}</p>
                <el-input v-model="ruleForm.content" type="textarea"  name="" :placeholder="$t('contact.messagePlaceholder')" rows="" cols=""></el-input>
              </div>
            </el-form-item>
          </el-form>
					<div class="submit" @click="submit">{{ $t('contact.submit') }}</div>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
import { http } from "@/api/api";

export default {
  computed: {
    banner() {
      return this.$store.state.banners || {}
    },
    // 产品头部-3-Hour Sunset Fishing Cruise
    contact() {
      return (this.banner['contact'] || { url: '' }).url
    },
  },
  data() {
    return {
      ruleForm: {
        subject: this.$t('products.sunsetCruise.title'),
        nickname: '',
        email: '',
        phone: '',
        content: ''
      },
      rules: {
        subject: [
          { required: true, message: 'Please select a subject', trigger: 'change' }
        ],
        nickname: [
          { required: true, message: 'Please enter your name', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please enter your email', trigger: 'blur' },
          { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: 'Please enter your phone number', trigger: 'blur' }
        ],
        content: [
          { required: true, message: 'Please enter your message', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          http.contact.create(null, this.ruleForm).then(res => {
            this.ruleForm = {
              subject: '3-Hour Sunset Fishing Cruise',
              nickname: '',
              email: '',
              phone: '',
              content: ''
            }
            this.$message({
              message: 'success',
              type: 'success'
            });
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
